<template>
  <div id="PriceInfo">
    <div class="whiteBg price" v-show='totalPrice!==0'>
      <div class="top">
        <img src="../../../static/m_img/btn_re.png" alt class="yang">
        <p>
          <span>新车完税上牌总价:{{(totalPrice/10000).toFixed(2)}}万元</span>
          <img src="../../../static/m_img/btn_d1.png" alt class="zan">
        </p>
      </div>
      <div class="bottom">
        比买新车省了约:
        <span>{{(save/10000).toFixed(2)}}万元</span>
      </div>
    </div>
    <div class='dk whiteBg' v-show='downPayment!==0'>
        <img src="../../../static/m_img/btn_visa.png" alt="">
        <p>车辆按揭分期 购车更轻松 首付约: <span>{{(downPayment/10000).toFixed(2)}}</span> 万</p>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    totalPrice:Number,
    downPayment:Number,
    save:Number
  }
};
</script>
<style lang="scss">
#PriceInfo {
    .dk{
        padding: 10px 15px; 
        margin-top: 15px;
        display: flex;
        align-items: center;
        color: #FF9800;
        font-size: 1.25rem;
        font-weight: bold;
        span{
            color: #323232;
        }
        img{
            width: 25px;
            height: 16px;
            margin-right:15px;
        }
    }
  .price {
    padding: 10px 0 10px 15px;
    .top {
      display: flex;
      padding: 15px 0;
      p {
        border-bottom: 1px solid #e5e5e5;
        width: 100%;
        padding-bottom: 10px;
      }
      .yang {
        width: 25px;
        height: 17px;
        margin-top: 3px;
      }
      .zan {
        width: 19px;
        height: 15px;
      }
      span {
        color: #0098ff;
        font-size: 1.25rem;
        margin: 0 15px;
      }
    }

    .bottom {
      color: #323232;
      padding-left: 40px;
      span {
        color: #0098FF;
      }
    }
  }
}
</style>
